const { defineConfig } = require("@vue/cli-service");
const { VantResolver } = require("@vant/auto-import-resolver");
const ComponentsPlugin = require("unplugin-vue-components/webpack");
// 使用 mockjs模拟数据   包含 图片网络路径，随便找个图片就可以  id  标题  描述等， 要10条
const Mock = require("mockjs");
const data = Mock.mock({
  "data|10": [
    {
      "id": "@id",
      title: "@ctitle(5, 10)",
      desc: "@cparagraph(1, 3)",
      img: "@image(150xx120, @color, @cname)",
      "price|10-100": 1
    },
  ],
})

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      // ComponentsPlugin({ resolvers: [VantResolver()] }), // 当 unplugin-vue-components 版本小于 0.26.0
      ComponentsPlugin.default({ resolvers: [VantResolver()] }), //当 unplugin-vue-components 版本大于等于 0.26.0
    ],
  },
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      // 帮我拦截 get /list 请求  使用devServer.app.get
      devServer.app.get("/list", (req, res) => {
        res.json({
          // 帮我模拟数据
          // 包含 图片网络路径，随便找个图片就可以  id  标题  描述等
          success: true,
          message: "获取商品列表成功",
          // 返回的数据
          code: 200,

          data: data.data
        });
      });

      // 添加自定义中间件
      // ...
      return middlewares;
    },
  },
});
